<template>
  <div class="diagnosis_search">
    <div class="diagnosis_search-top">账号诊断</div>
    <div class="diagnosis_search-wrap mt_14">
      <div class="search-wrap_record">
        <div>
          <div data-v-378b4e67 class="notice-box"></div>
          定位达人
        </div>
        <div
          class="record-right"
          @click="$router.push('/inAnalysis/diagnosisHishtory')"
        >
          查看诊断记录<img src="@/assets/li/more.png" />
        </div>
      </div>
      <div class="search-wrap_input">
        <!-- <div class="input-box"> -->
        <input
          class="search-ipt"
          type="text"
          v-model="goodsName"
          placeholder="请输入抖音昵称或抖音号"
          @keyup.enter="toSearchPage()"
        />
        <div class="search-sre" @click="toSearchPage()">
          <img src="@/assets/meng/search01.png" />
        </div>
      </div>
      <div v-if="showTips" class="null-taps-text">
        * 请输入要搜索的抖音昵称或抖音号
      </div>
      <!-- <el-alert
        class="wrap_input-tips"
        v-if="showTips"
        title="请输入要搜索的抖音昵称或抖音号"
        type="error"
        :closable="false"
      >
      </el-alert>-->
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "DiagnosisSearch",
  data() {
    return {
      goodsName: "",
      showTips: false
    };
  },
  props: {},
  watch: {},
  components: {},
  computed: {},
  created() {
    document.title = "账号诊断&智能分析服务平台-掌上精选";
  },
  mounted() {},
  methods: {
    // 搜索
    toSearchPage() {
      if (this.goodsName == "") {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 1500);
      } else {
        this.$store.commit("accountDiagnosisList", this.goodsName);
        this.$router.push("/inAnalysis/diagnosisDetails");
      }
    }
  }
};
</script>

<style scoped lang="less">
.diagnosis_search-top {
  height: 54px;
  line-height: 54px;
  text-align: center;
  margin-top: 14px;
  border-radius: 4px;
  font-size: 22px;
  color: #fff;
  // background-color: skyblue;
  background: url("~@/assets/shi/topbgc.png");
}
.diagnosis_search-wrap {
  // min-height: 822px;
  min-height: calc(100vh - 62px);
  border-radius: 4px;
  background-color: #fff;
  padding: 20px;
  .search-wrap_record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .record-left {
      width: 102px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      background: #1779ff;
    }
    .record-left:hover {
      cursor: default;
    }
    .record-right {
      font-size: 14px;
      color: #fd7f2c;
      font-weight: normal;
      > img {
        width: 7px;
        height: 11px;
        margin-left: 5px;
        margin-top: 1px;
      }
    }
    .record-right:hover {
      cursor: pointer;
    }
    .notice-box {
      display: inline-block;
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
      margin-top: 1px;
    }
    > div {
      font-size: 16px;
      color: #222;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
  }
  .search-wrap_input {
    width: 513px;
    height: 51px;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 216px;
  }
  .wrap_input-tips {
    width: 512px;
    margin: 0 auto;
  }
  //   .input-box{
  //       width: ;
  //       border: 1px solid #e6e6e6;
  //   }
  .search-ipt {
    width: 436px;
    height: 51px;
    line-height: 100%;
    border: none;
    font-size: 16px;
    padding-left: 21px;
    padding-right: 21px;
    color: #222;
  }
  input::-webkit-input-placeholder {
    color: #b5b5b5 !important;
  }
  .search-sre {
    width: 77px;
    height: 51px;
    background-color: #fd7f2c;
    border-radius: 4px;
    position: relative;
    img {
      cursor: pointer;
      width: 21px;
      height: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }
}
.null-taps-text {
  width: 513px;
  margin: 0 auto;
  text-align: left;
  font-size: 14px;
  color: #ea1b0b;
  padding-top: 10px;
  padding-left: 5px;
}
</style>
